<!-- 表格按钮 -->
<template>
	<div class="tab-btn">	
		<span v-for="(val,index) in serverData" class="btn" :class="{'cur':index==curIndex}" @click="c_btnClick(val.code,index)">{{ val.tab }}</span>
	</div>
</template>


<script>


export default {
	data(){
		return {
			curIndex: null
		}
	},
    props: ['serverData'],
	methods: {
		c_btnClick(code,index){   // 函数
			this.curIndex = index   // 设置样式
			this.$emit("constituencyEvent" , code)  // 触发自定义事件 并 像父组件传值
		}
	}
}

</script>


<style lang="less" scoped>
.tab-btn{
	padding-top: 10px;
	font-size: 0;
	display: flex;
	flex-wrap: wrap;
	.btn{
		color: #fff;
		font-size: 12px;
		width: 50px;
		line-height: 30px;
		height: 30px;
		border: #fff solid 1px;
		display: inline-block;
		margin-bottom: 8px;
		box-sizing: border-box;
		text-align: center;
		flex-grow: 1;
		border-radius: 2px;
	}
	.cur{
		color: red;
		font-weight: 700;
		font-size: 12px;
		background: rgba(43, 184, 170,0.6);

	}

}


</style>